<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between;margin-bottom: 20px">
      <div></div>
      <div>
        <el-button @click="increment" size="small" type="primary">添加年级</el-button>
      </div>
    </div>
    <el-table
      :row-class-name="xxxTableRowClassName"
      :data="list"
      element-loading-text="Loading"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
      fit
      highlight-current-row
    >
      <template slot="empty">
        <span>暂无年级</span>
      </template>
      <!--      row-click 行点击事件-->
      <el-table-column
        align="center"
        prop="gradeName"
        label="年级名称"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            plain
            type="primary"
            size="small"
            @click="gradeEdit($event, scope.row)"
          >编辑</el-button
          >
          <el-button
            plain
            type="danger"
            size="small"
            @click="delGrade($event, scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <gradeDialog v-if="dialogVisible" @submit="submit" @close="close" :isEdit="isEdit" :item="item" :dialogVisible="dialogVisible" />
<!--    <pagination-page @size="changeSize" @page="changePage" :total="total" />-->
  </div>
</template>

<script>
import {gradeList,gradeDel} from '@/api/school/grade'
import gradeDialog from '@/views/school/grade/component/gradeDialog'
export default {
  data() {
    return {
      list: null,
      isLoading: false,
      dialogVisible: false,
      item: {},
      isEdit: false,
      model: {
        schoolId: null,
      },
    };
  },
  components:{
    gradeDialog
  },
  created() {
    this.fetchData()
  },
  methods: {
    submit(){
      this.fetchData()
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    changeSize(size) {
      this.model.pageSize = size;
      this.fetchData();
    },
    changePage(page) {
      this.model.pageNum = page;
      this.fetchData();
    },
    increment() {
      this.dialogVisible = true;
    },
    fetchData(){
      gradeList({ schoolId: this.$store.state.user.USER_INFO.pscShId }).then(response=>{
        if(response.code == 200){
          this.list = response.result
        }
      })
    },
    gradeEdit(evt,row){
      let target = evt.target;
      if (target.nodeName == "SPAN") {
        target = evt.target.parentNode;
      }
      target.blur();
      this.isEdit = true;
      this.dialogVisible = true;
      this.item = row;
    },
    close(){
      this.isEdit = false;
      this.dialogVisible = false;
      this.item = {};
    },
    delGrade(evt,row){
      let target = evt.target;
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (target.nodeName == "SPAN") {
            target = evt.target.parentNode;
          }
          target.blur();
          let data = {
            gradeId: row.gradeId,
          };
          gradeDel(data).then((res) => {
            if (res.code === 200) {
              this.fetchData();
              this.$message.success("删除成功");
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          if (target.nodeName == "SPAN") {
            target = evt.target.parentNode;
          }
          target.blur();
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    }
  },
};
</script>
<style scoped lang="scss">
.app-top {
  display: flex;
  justify-content: space-between;

  margin-bottom: 30px;
}
::v-deep .el-table__body-wrapper .statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
</style>
